<template>
	<view class="container">
		<!-- 顶部信息 -->
		<view class="top">
			<view class="item">
				<navigator url="/pages/index/xiaoxizhongxin/xiaoxizhongxin">
					消息中心
				</navigator>
				<view class="title">首页</view>
				<navigator url="/pages/index/xvanzechengshi/xvanzechengshi">
					选择城市
				</navigator>
			</view>
			<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" placeholder="郑州市高新区" clearButton="none"
				cancelButton="none">
					<image class="dw" src="@/static/images/ljh/dw@2x.png" slot="searchIcon" color="#999999" size="18"
						type="home" />
			</uni-search-bar>
			<uni-card style="padding-bottom: 40rpx;margin-bottom: 150rpx;margin-top: 50rpx;">
				<uni-grid :column="4" :highlight="true" :showBorder="false">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view @click="nav_btn(index)" class="grid-item-box" style="background-color: #fff;">
							<image class="subimg" :style="{'background-color':item.color}" :src="item.url"></image>
							<text class="text">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-card>
		</view>

		<!-- 附件加油 -->
		<uni-card class="aa1" title="附件加油站" extra="更多" sub-title="根据您的位置推荐最近的加油站" style="margin-top: 100rpx;"
			@click="more_jy_btn">
			<map class="map"></map>
		</uni-card>

		<!-- 优惠团购 -->
		<uni-card title="优惠团购" extra="更多" sub-title="聚会袭来,为您的爱车续航" style="margin-top: 50rpx;" @click="more_buy_btn">
			<uni-grid :column="2" :highlight="true" :showBorder="false">
				<uni-grid-item v-for="(item, index) in YHlist" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<image class="yhimg" :style="{'background-color':item.color}" :src="item.url"></image>
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
		
		<!-- 紧急救援 -->
		<view @click="GotoEmergency" class="emergency-container">
			<image src="../../static/emergency@2x.png" class="emergency-image"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						url: '../../static/images/ljh/clwx@2x.png',
						text: '车辆维修',
						color: 'blue'
					},
					{
						url: '../../static/images/ljh/by.png',
						text: '汽车保养',
						color: 'orange'
					},
					{
						url: '../../static/images/ljh/xc@2x.png',
						text: '专业洗车',
						color: 'green'
					},
					{
						url: '../../static/images/ljh/jyq@2x.png',
						text: '就近加油',
						color: 'cornflowerblue'
					}
				],
				YHlist: [{
						url: '../../static/images/ljh/clwx@2x.png',
						text: '车辆维修',
						color: 'blue'
					},
					{
						url: '../../static/images/ljh/by.png',
						text: '汽车保养',
						color: 'orange'
					},
					{
						url: '../../static/images/ljh/xc@2x.png',
						text: '专业洗车',
						color: 'green'
					},
					{
						url: '../../static/images/ljh/jyq@2x.png',
						text: '就近加油',
						color: 'cornflowerblue'
					}
				],
			}
		},
		methods: {
			GotoEmergency(){
				uni.$u.route('/pages/ljh/EmergencyRescue/EmergencyRescue')
			},
			
			nav_btn(index) {

				if (index == 0) {
					uni.$u.route('/pages/ys/carFix1/carFix1')
				} else if (index == 1) {
					uni.$u.route('/pages/ls/nearbyStores/nearbyStores')
				} else if (index == 2) {
					uni.$u.route('/pages/lzx/professionalCarWash')
				} else if (index == 3) {
					uni.$u.route('/pages/ljh/refuelNearby/refuelNearby')
				}
			},
			more_jy_btn() {
				uni.$u.route('/pages/ljh/refuelNearby2/refuelNearby2')
			},
			more_buy_btn() {
				uni.$u.route('/pages/ly/buy/buy1')
			}
		}
	}
</script>

<style>
	.container{
		/* 页面其他内容的样式 */
		  position: relative; /* 确保固定位置的元素能够相对于整个页面定位 */
		  width: 100%;
		  height: 100%;
		  /* 其他样式根据需要添加 */
	}
	/* 紧急救援容器的样式 */
	.emergency-container {
	  position: fixed; /* 固定定位 */
	  bottom: 30rpx; /* 紧贴页面底部 */
	  left: 50%; /* 水平居中，先设置到页面中间 */
	  transform: translateX(-50%); /* 水平方向反向移动自身宽度的一半，实现真正居中 */
	  width: fit-content; /* 容器宽度适应内容 */
	  display: flex; /* 使用弹性布局 */
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中（虽然由于 translateX 已经居中，这里不是必需的） */
	  height: 100rpx; /* 根据需要设置容器高度，包含图片和内边距等 */
	  background-color: rgba(255, 0, 0, 0.8); /* 可选：设置背景色和透明度 */
	  border-radius: 10rpx; /* 可选：设置圆角 */
	  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
	  /* 确保点击区域足够大，可以通过增加内边距或容器高度来实现 */
	  z-index: 9999;
	}
	 
	.emergency-image {
	  width: 100rpx;
	  height: 100rpx;
	  /* 其他图片样式根据需要添加 */
	}
	
	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}
	.top .item{
		color: white;
		padding: 30rpx 30rpx;
		font-size: 35rpx;
		display: flex;
		justify-content: space-between;
	}


	.uni-mt-10 {
		margin-top: 10px;
	}

	.dw {
		width: 35rpx;
		height: 35rpx;
		margin-left: 20rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.subimg {
		width: 80rpx;
		height: 80rpx;
		background-color: blue;
		padding: 10rpx;
		border-radius: 30rpx;
		/* margin-bottom: 10rpx; */
	}

	.map {
		width: 100%;
		height: 300rpx;
	}

	.yhimg {
		width: 250rpx;
		height: 180rpx;
		background-color: blue;
		padding: 10rpx;
		border-radius: 30rpx;
	}
</style>